/* eslint-disable react/jsx-indent */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Table, Button, Spin, Modal, Row, Col, Cascader, message, Tooltip } from 'antd';
import Link from 'umi/link';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';

const FormItem = Form.Item;
@connect(({ addemprec }) => ({
  data: addemprec.data,
  addemprec,
  // loading: loading.models.addemprec,
}))
@Form.create()
class TableList extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      twoLevelHouse: false,
      recvList: {},
      columns: [
        {
          title: '关联客户',
          dataIndex: 'custName',
          onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        },
        {
          title: '签约方',
          dataIndex: 'sendSuppName',
          onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        },
        {
          title: '协议名称',
          dataIndex: 'suppProtName',
          onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        },
        {
          title: '服务产品',
          dataIndex: 'pdName',
          onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
          render: (val, record) => (
            <Tooltip
              title={
                <div>
                  {record &&
                    record.fee &&
                    record.fee.map(item => (
                      <span>
                        {item}
                        <br />
                      </span>
                    ))}
                </div>
              }
            >
              <div
                style={{
                  width: '160px',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap',
                  cursor: 'pointer',
                }}
              >
                {val}
              </div>
            </Tooltip>
          ),
        },
        {
          title: '执行地',
          dataIndex: 'areaName',
          onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        },
        {
          title: '价格',
          dataIndex: 'price',
          onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        },
        {
          title: '关联人数',
          dataIndex: 'empNum',
          onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        },

        {
          title: '操作',
          onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
          render: e => <a onClick={() => this.addemprecList(e)}>批量接单</a>,
        },
      ],
    };
  }

  componentDidMount() {
    this.getDetail();
  }

  getDetail = () => {
    this.setState({
      loading: true,
    });
    const {
      dispatch,
      addemprec: { formFieldsValue },
    } = this.props;
    dispatch({
      type: 'addemprec/seeagreement',
      payload: {
        ...formFieldsValue,
      },
      callback: response => {
        if (response.success) {
          this.setState({
            loading: false,
          });
        } else {
          this.setState({
            loading: false,
          });
        }
      },
    });
  };

  addemprecList = e => {
    const { dispatch } = this.props;
    this.setState({
      recvList: e,
    });
    const parame = {
      sendSuppId: e.sendSuppId,
      custId: e.custId,
      suppProtId: e.suppProtId,
      areaId: '1415662',
    };
    dispatch({
      type: 'addemprec/getTwohouseData',
      payload: parame,
      callback: response => {
        if (response.flag) {
          this.setState({
            twoLevelHouse: true,
          });
        } else {
          this.setState({
            twoLevelHouse: false,
          });
          dispatch({
            type: 'addemprec/batchConnec',
            payload: parame,
            callback: responses => {
              if (responses.success) {
                this.getDetail();
                this.setState({
                  twoLevelHouse: false,
                });
              } else {
                this.setState({
                  twoLevelHouse: false,
                });
                this.getDetail();
              }
            },
          });
        }
      },
    });
  };

  handleOk = () => {
    const { form } = this.props;
    const twoLevelHouse = form.getFieldValue('twoLevelHouse');
    form.validateFieldsAndScroll(err => {
      if (!err) {
        const { dispatch } = this.props;
        const { recvList } = this.state;
        if (twoLevelHouse && twoLevelHouse.length > 1) {
          const parame = {
            sendSuppId: recvList.sendSuppId,
            custId: recvList.custId,
            sendOrdSuppProtId: recvList.sendOrdSuppProtId,
            suppProtId: recvList.suppProtId,
            injSecId: twoLevelHouse[1],
          };
          dispatch({
            type: 'addemprec/batchConnec',
            payload: parame,
            callback: response => {
              if (response.success) {
                this.getDetail();
                this.setState({
                  twoLevelHouse: false,
                });
              } else {
                this.setState({
                  twoLevelHouse: false,
                });
                this.getDetail();
              }
            },
          });
        } else {
          message.warning('请选择二级户');
        }
      }
    });
  };

  // 隐藏弹框
  handleCancel = () => {
    this.setState({
      twoLevelHouse: false,
    });
  };

  render() {
    const { loading, twoLevelHouse, columns } = this.state;
    const {
      data,
      addemprec,
      form: { getFieldDecorator },
    } = this.props;
    const tableSearchLayout = {
      labelCol: { md: { span: 7 } },
      wrapperCol: { md: { span: 17 } },
    };

    return (
      <PageHeaderWrapper>
        <Spin tip="Loading..." spinning={loading}>
          <Card
            title="协议查询"
            style={{ border: '0px', marginBottom: 24, fontSize: 16, color: '#262626' }}
          >
            <Form>
              <Table columns={columns} dataSource={data.list} pagination={false} />
            </Form>
          </Card>
          <FooterToolbar style={{ width: '100%' }}>
            <Link to="/receiveordermanage/addemployee/index">
              <Button style={{ marginRight: 10 }}>关闭</Button>
            </Link>
          </FooterToolbar>
        </Spin>
        <Modal
          title="选择工伤二级户"
          visible={twoLevelHouse}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          destroyOnClose
          width="800px"
        >
          <Row gutter={{ md: 24, lg: 24, xl: 48 }}>
            <Col md={24} sm={24}>
              <FormItem {...tableSearchLayout} label="城市">
                石家庄
              </FormItem>
            </Col>
          </Row>
          <Row gutter={{ md: 24, lg: 24, xl: 48 }}>
            <Col md={24} sm={24}>
              <FormItem {...tableSearchLayout} label="工伤二级户">
                {getFieldDecorator('twoLevelHouse', {
                  rules: [{ required: true, message: '请选择' }],
                  // rules: [{ required: addemprec.payWay === '1', message: '请选择' }],
                  // initialValue: addemprec.accoId || undefined,
                })(
                  <Cascader
                    style={{ width: '270px' }}
                    placeholder="请输入关键字检索"
                    options={
                      addemprec.secAccuList && addemprec.secAccuList.length > 0
                        ? addemprec.secAccuList
                        : []
                    }
                    showSearch
                    notFoundContent="暂无工伤二级户"
                    // onChange={(value, options) =>
                    //   this.selectSecAcco(value, options, addemprec.secAccuList.id)
                    // }
                    changeOnSelect
                  />
                )}
              </FormItem>
            </Col>
          </Row>
        </Modal>
      </PageHeaderWrapper>
    );
  }
}

export default TableList;
